<template>
  <div id="movies">
    <h1>{{$t('m.movies')}}</h1>
    <h2>{{$t('m.movieSlogan')}}</h2>
    <tag-search @tagsText="test"/>
    <div id="movieMainView">
      <div id="movieMainBox">
        <div  v-for="movie in movieList" :key="movie.movieId">
        <router-link id="movieBox" :to="{name:'movieInfo',params: {id: movie.movieNameEn}}" >
          <img :src="movie.movieImg" alt="">
          <span>{{movie.movieName}}</span>
          <div class="lab-hidden">
            <span class="lab" v-for="lab in movie.movieGen.split(' ').slice(0, 3)" :key="lab.id">{{lab}}</span>
          </div>
        </router-link>
      </div>
      </div>
    </div>
  </div>

</template>

<script>
  import tagSearch from "../functional unit/tagSearch";
  import api from "../../model/api";
  export default {
    name: 'moviesView',
    data(){
      return{
        movieList:[]
      }
    },
    methods:{
      async getMovieList(tagText){
        const {data:res} = await this.$axios.post('v1/getSearchMovieTags', {movieGen:tagText})
        if(res.code === 200){
          this.movieList = res.data
        }
      },
      test(data){
        this.getMovieList(String(data))
        console.log(data)
      },

    },
    created() {
      this.getMovieList('')
    },
    components:{
      tagSearch,
    },

  }
</script>

<style lang="less" scoped>
  #movies{
    margin: 30px 30px 0 30px;
    width: 100%;
    h1{
      font-size: 60px;
      /*font-weight: 900;*/
    }
    h1,h2{
      color: var(--theme-fontMain);
    }
    .movieMenu{
      width: 100%;
      height: 40px;
      background-color: red;
    }
    #movieMainView{
      margin-top: 20px;
      width: 100%;
      height: 100%;
      /*background-color: red;*/

    }
    #movieMainBox{
      display: flex;
      flex-wrap: wrap;
      margin-right: -20px;
    }
    #movieBox{
      /*width: 100px;*/
      /*background-color: blue;*/
      display: flex;
      flex-flow: column;
      margin-right: 21.71px;
      margin-bottom: 21.71px;
      span{
        margin: 5px 0;
        font-size: 16px;
        font-weight: 800;
      }
      img{
        width: 170px;
        height: 238px;
        border-radius: 6px;
        transition: all 0.1s ease-in-out;
      }
      img:hover{
        box-shadow: -5px 5px 0 #0a80c1;
        transform: translate3d(5px, -5px, 0);
      }
      .lab-hidden{
        span{
          font-size: 12px;
          margin: 0 5px 5px 0;
        }
      }
    }
  }
</style>
